<template>
    <div>
        <div  class="top">
            <div>
            
                <div class="cenyer-cen namenames" :class='{playing:!$store.state.isplay}'>
                        <img src="@/assets/topimg/player_bar.png" class="play_bar" />
                        <!-- 黑胶碟片 -->
                        <img src="@/assets/topimg/disc.png" class="djwai cover autoRotate" />
                        <img class="songlogo disc autoRotate" v-if='$store.state.musicuser.al' :src="$store.state.musicuser.al.picUrl" alt="">

                        <!-- <img :src="musimg" class="cover autoRotate" /> -->
                    </div>
            
            </div>
            <div class="toprigth">
                <div class="name">
                    <div v-if='$store.state.musicuser.al'>{{$store.state.musicuser.name}}</div>
                    <div v-if='$store.state.musicuser.al'>{{$store.state.musicuser.ar[0].name}}</div>
                </div>
            <div class="lyrics" >
                <div :style="{transform:'translateY('+(index-2)*-45+'px)'}">
                    <div
                    class="lyricsItem"
                    ref="lyricsdd"
                    :class="$store.state.currtime >= key[index] && $store.state.currtime < key[index+1] ? 'currentLyric' : ''"
                    v-for="(item, index) in gc"
                    :key="index"
                    >
                    {{ item[1] }}
                    <!-- {{index}} -->
                    <!-- {{item[0]}} -->
                    <!-- {{gc}} -->
                    <!-- {{gc[index+1]}} -->
                    {{gcgd(index)}}
                    </div>
            </div>
            </div>
            </div>
        
        </div>
        
       <div v-if="plishow" class="pl">
           <div class="newpl">最新评论({{total}})</div>
           <div  class="list" v-for="(item,index) in comment" :key="index">
               <img :src="item.user.avatarUrl" alt="">
               <div>
                    <div class="name">{{item.user.nickname}}:</div>
                    <div class="time">{{time(item.time)}}</div>
               </div>
               <div>
               <div class="nipl">{{item.content}}</div>
               </div>
           </div>
       </div>
       <div>
           <div  @click="loading" class="logoname" v-if="$store.state.login==200">发表我的音乐评论</div>
           <div @click="noloading" class="logoname" v-else>登录发表我的音乐评论</div>
           
       </div>
       <div v-show="ishow" class="fabiao">
               <textarea v-model = 'text'></textarea>
               <div class="div">
                   <div @click="fabiao" class="fab dd">发表</div>
                    <div @click="guanbi" class="gbi dd">关闭</div>
               </div>
               
        </div>
    </div>
</template>

<script>
// let placeholderHeight = 0;

// Vue.forceUpdate();
import http from '@/http/http.js'
import moment from 'moment'
export default {
    props:['songgc'],
    data() {
        return {
            url:this.$store.state.musicurl,
            gc:null,
            lyricsIndex: 0,
            key:[],
            index:'',
            comment:[],
            total:'',
            text:'', //评论框的值
            ishow:false,
            plishow:true

        }
    },
    computed:{
        monitor () {
		return this.$store.state.musicurl
	    }
    },
    watch:{
        monitor(){
            http({
                url:'/lyric',
                params:{
                    id:this.$store.state.musicuser.id
                }
            }).then(res=>{
                // this.gc = res 
                let lyrics = res.data.lrc.lyric;
                // 对获取到的歌词进行处理
                let arr = lyrics.split("\n");
                let array = [];
                // let obj = {};
                let time = "";
                let value = "";
                let result = [];
                let key = []
                 //去除空行
                arr.forEach((item) => {
                    if (item != "") {
                    array.push(item);
                    }
                });
                arr = array;
                 arr.forEach((item) => {
                time = item.split("]")[0];
                value = item.split("]")[1];
                //去掉时间里的中括号得到xx:xx.xx
                var t = time.slice(1).split(":");
                //将结果压入最终数组
                result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);
                key.push(parseInt(t[0], 10) * 60 + parseFloat(t[1]))
            });
             this.gc = result;
             this.key = key
            //  let key = result[0]
                // console.log(this.key)
                // for(var key in this.key){
                //     console.log(this.gc[key[0]])
                // }
            //  console.log(this.gc[0])
                // for(var 0 in result){
                //         this.key.push(0)
                // }
                // console.log(this.key)
            })
            var commnew = Date.parse(new Date())

            http({

                 url:'/comment/music',
                params:{
                    id:this.$store.state.musicuser.id,
                    limit:100,
                    timestamp:commnew


                }
            }).then(res=>{
                console.log(res)
                this.comment = res.data.comments
                this.total = res.data.total
            })
        },
       
            
        deep:true
    },
    methods: {
        guanbi(){
            this.ishow = false
            
        },
        //发表
        fabiao(){
            var time = Date.parse(new Date())
            http({
            url:'/comment',
            params:{
                id:this.$store.state.musicuser.id,
                t:1,
                type:0,
                content:this.text,
                timestamp:time
            }
            }).then(res=>{
            if(res.data.code == 200){
                  this.$message({
                    message: '恭喜你，这是一条成功消息',
                    type: 'success'
                    });
                this.text = ''
                    
                console.log(time)
            }else{
                    this.$message({
                    message: '发表失败',
                    type: 'warning'
                    });
            }
        })
                    setTimeout(res=>{
                        var commnew1 = Date.parse(new Date())
                    http({
                    url:'/comment/music',
                    params:{
                        id:this.$store.state.musicuser.id,
                        limit:100,
                        timestamp:commnew1
                    }
                    }).then(res=>{
                        console.log(res)
                        this.comment = res.data.comments
                        this.total = res.data.total
                    })
                    },500)



        },
        loading(){
            this.ishow = true
            
        },
        noloading(){
            this.$message({
          message: '请返回登录发表评论',
          type: 'warning'
        });
        },
        time(time){
            return moment(time).format('MM月DD日 h:mm')
        },
        // 实现歌词滚动
        gcgd(index){
            // clearInterval()
            if(this.$store.state.currtime >= this.key[index] && this.$store.state.currtime < this.key[index+1]){
                    // console.log(index)
                    this.index = index
            }
        }
   
    },
    mounted() {
                    // this.$refs.lyricsdd.scrollTop = -300+'px'

        http({
            url:'/lyric',
            params:{
                id:this.$store.state.musicuser.id
            }
        }).then(res=>{
            // console.log(res)
            this.gc = res
        })

        
    },
}
</script>

<style lang="less" scoped>
.newpl{
    margin-bottom: 10px;
}
.fabiao{
    position: fixed;
    left: 700px;
    bottom: 300px;
    width: 400px;
    height: 200px;
    border: 1px solid #666;
    text-align: center;
    padding: 20px;
    background-color: pink;
    border-radius: 10px;
    textarea{
        width: 300px;
        height: 100px;
        padding: 10px;
        font-size: 18px;
    }
    
    .div{
        width: 400px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        background-color: pink;
        .dd{
        width: 100px;
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
        background-color: white;
        // margin: 0 auto;
        cursor: pointer;
        margin-left: 5px;
        }
        .dd:hover{
            background-color:#3333;
        }
        }
}
.logoname{
    position: fixed;
    left: 860px;
    bottom: 100px;
    width: 120px;
    height: 30px;
    background-color: rgba(226, 220, 220, 0.938);
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    // border: 1px solid #999;
    border-radius: 30px;
    z-index: 999;
    font-size: 13px;
}
@keyframes Rotate {
    from {
        transform: rotateZ(0);
    }
    to {
        transform: rotateZ(360deg);
    }
}


/* 旋转的类名 */

.autoRotate {
    animation-name: Rotate;
    animation-iteration-count: infinite;
    animation-play-state: paused;
    animation-timing-function: linear;
    animation-duration: 5s;
}


/* 是否正在播放 */

.cenyer-cen.playing .disc,
.cenyer-cen.playing .cover {
    animation-play-state: running;
}

.play_bar {
    position: absolute;
    left: 350px;
    top: 25px;
    z-index: 10;
    transform: rotate(-25deg);
    transform-origin: 12px 12px;
    transition: 1s;
    z-index: 999;
}


/* 播放杆 转回去 */

.cenyer-cen.playing .play_bar {
    transform: rotate(0);
}
.top{
    display: flex;
    width: 1800px;
    flex-direction: row;
    // justify-content: space-between;
    padding: 100px;
    // padding-right: 500px;
    .toprigth{
        padding-left: 380px;
        width: 300px;
        .name{
            font-size: 20px;
            text-align: center;
        }
    }
}
div{
    background-color: white;
}
.namenames{
    position: relative;
}
.djwai{
    // position: fixed;
    // left: 200px;
    // top: 100px;
    position: absolute;
    left: 100px;
    top: 20px;
    width: 310px;
    height: 310px;
    z-index: 1;
}
.songlogo{
    margin-left: 150px;
    margin-top: 70px;
    width: 200px;
    height: 200px;
    border-radius: 100px;
}
.lyrics {
  width: 100%;
  height: 275px;
  font-size: 12px;
  text-align: center;
//   overflow-y: scroll;
    overflow: hidden;
  /* overflow: scroll; */
}
.pl::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: pink; 
} 
.pl::-webkit-scrollbar {/*滚动条整体样式*/
    width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
    // height: 100px;
}
.pl{
  overflow-y: scroll;
//   overflow: hidden;
    width: 1500px;
    margin: 0 auto;
  height: 300px;
    // white-space: nowrap;
  
  .list{
        height: 80px;
        display: flex;
        flex-direction: row;
        // align-items: center;
      img{
          width: 50px;
          height: 50px;
          border-radius: 50px;
          cursor: pointer;
      }
      .name{
          height: 30px;
          margin-left: 3px;
          font-size: 13px;
          color:#507daf;
          cursor: pointer;
      }
      .time{
          height: 30px;

          margin-left: 3px;
          font-size: 13px;
      }
      .nipl{
        //   padding-top: 30px;
            height: 60px;
          color: #666;
          font-size: 13px;
      }
  }

}
.lyrics::-webkit-scrollbar {
  display: none;
}

.lyricsItem {
  font-size: 12px;
  /* height: 20px; */
  margin: 25px 20px;
  transition: all 0.5s;    
  line-height: 20px;
  top: 500px;
}

.currentLyric {
  font-weight: 600;
  font-size: 14px;
  color: black;
}

.placeholder {
  width: 100%;
  height: 40%;
}
</style>